<div class="page">


    <section class="panel panel-default">
        <div class="panel-heading"><strong><span class="glyphicon glyphicon-th"></span> Wizard Form</strong></div>
        <div class="panel-body">
            <div data-ui-wizard-form>
                <h1>First Step</h1>
                <div>First Content</div>

                <h1>Second Step</h1>
                <div>Second Content</div>

                <h1>Third Step</h1>
                <div>Third Content</div>  
            </div>

        </div>
    </section>

    <section class="panel panel-default">
        <div class="panel-heading"><strong><span class="glyphicon glyphicon-th"></span> Wizard Form</strong></div>
        <div class="panel-body">
            <div class="vertical" data-ui-wizard-form>
                <h1>First Step</h1>
                <div>First Content</div>

                <h1>Second Step</h1>
                <div>Second Content</div>

                <h1>Third Step</h1>
                <div>Third Content</div>  
            </div>

        </div>
    </section>   


<!--     <section class="panel panel-default">
        <div class="panel-heading"><strong><span class="glyphicon glyphicon-th"></span> Wizard Form with Validation</strong></div>
        <div class="panel-body" data-ng-controller="wizardFormCtrl">

            <wizard on-finish="finishedWizard()" class="wizard-steps-container"> 
                <wz-step title="Starting">
                    <h2>This is the first step</h2>
                    <form name="wizard_step1">
                        <div class="form-group">
                            <label for="">First Name</label>
                            <input  type="text"
                                    class="form-control"
                                    data-ng-model="wizard.firstName"
                                    required
                                    >
                        </div>
                        <div class="form-group">
                            <label for="">Last Name</label>
                            <input  type="text"
                                    class="form-control"
                                    data-ng-model="wizard.lastName"
                                    required
                                    >
                        </div>
                    </form>
                    <buttton class="btn btn-primary"
                             ng-click="isValidateStep1()"
                             wz-next>Next</buttton>
                </wz-step>
                <wz-step title="Continuing">
                    <h2>Continuing</h2>
                    <form name="wizard_step2">
                        <div class="form-group">
                            <label for="">Email</label>
                            <input type="email"
                                   class="form-control"
                                   data-ng-model="wizard.email"
                                   required>
                        </div>
                        <div class="form-group">
                            <label for="">Password</label>
                            <input type="password"
                                   class="form-control"
                                   placeholder="min length 6"
                                   data-ng-model="wizard.password"
                                   required
                                   data-ng-minlength="6">
                        </div>                        
                    </form>
                    <buttton class="btn btn-primary" wz-next>Next</buttton>
                </wz-step>
                <wz-step title="Continuing">
                    <h2>Something you need to know:</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut, eos, dolorum, sapiente, autem provident error deleniti voluptas quas laudantium fugiat cum reiciendis rerum eligendi laboriosam perferendis maiores dolores aspernatur! Possimus.</p>
                    <buttton class="btn btn-primary" wz-next>Next</buttton>
                </wz-step>
                <wz-step title="Finish">
                    <h2>Even more steps!!</h2>
                    <form name="wizard_step3">
                        <div class="form-group">
                            <label for="">Age</label>
                            <input type="number"
                                   class="form-control"
                                   placeholder="Min value 0, max value 100"
                                   data-ng-model="wizard.age"
                                   required
                                   data-min="0"
                                   data-max="100">
                        </div>
                        <div class="form-group">
                            <label for="">Address</label>
                            <input type="number"
                                   class="form-control"
                                   placeholder="Min value 0, max value 100"
                                   data-ng-model="wizard.address"
                                   required
                                   data-min="0"
                                   data-max="100">
                        </div>
                    </form>                    
                    <buttton type="submit" class="btn btn-primary" wz-next>Finish</buttton>
                </wz-step>
            </wizard>

            <div class="callout callout-info" data-ng-show="true">
                <p>In real project, you'll want to submit them using AJAX</p>

            </div>
        </div>
    </section> -->

</div>